<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid布局示例</title>
  <style>
    /* 全局样式，方便查看效果 */
    * {
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }


    /* 1. 基本的grid容器设置 */
    #basic-grid {
      display: grid;
      gap: 5px;
      background-color: lightgray;
    }

    div {
      background-color: lightblue;
      padding: 15px;
      text-align: center;
    }


   

    

    
    /* <!-- 3. grid-column-start、grid-column-end、grid-row-start和grid-row-end属性 --> */
    #cell1 {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 3;
      background-color: lightpink;
      padding: 15px;
      text-align: center;
    }

    #cell2 {
      grid-column-start: 3;
      grid-column-end: 4;
      grid-row-start: 2;
      grid-row-end: 4;
      background-color: lightsalmon;
      padding: 15px;
      text-align: center;
    }


    /* 4. grid-area属性 */
    #header {
      grid-area: header;
      background-color: lightcyan;
      padding: 15px;
      text-align: center;
    }

    #sidebar {
      grid-area: sidebar;
      background-color: lavender;
      padding: 15px;
      text-align: center;
    }

    #main {
      grid-area: main;
      background-color: plum;
      padding: 15px;
      text-align: center;
    }

    #footer {
      grid-area: footer;
      background-color: powderblue;
      padding: 15px;
      text-align: center;
    }


    /* 5. justify-items和align-items属性 */
    /* 这个的意思 应该是想让 子元素上下左右居中，但是好像不生效，我也试了很多方法，不生效 */
    #justify-align-items {

      display: grid;
  
      grid-template-columns: 200px 100px;
      grid-template-rows: 50px 50px;
      gap: 5px;
      justify-items: center;
      align-items: end;
      background-color: lightgray;
    }

    /* 6. justify-self和align-self属性 */
    #justify-self-align-self {
      display: grid;
      grid-template-columns: 100px 100px;
      grid-template-rows: 50px 50px;
      gap: 5px;
      background-color: lightgray;
    }

    #item1 {
      background-color: palevioletred;
      padding: 15px;
      text-align: center;
      justify-self: start;
      align-self: start;
    }

    #item2 {
      background-color: peru;
      padding: 15px;
      text-align: center;
      justify-self: end;
      align-self: center;
    }


    /* 7. grid-auto-columns和grid-auto-rows属性 */
    #grid-auto-columns-rows {
      display: grid;
      grid-template-columns: 100px;
      grid-auto-columns: 50px;
      grid-template-rows: 50px;
      grid-auto-rows: 30px;
      gap: 5px;
      background-color: lightgray;
    }

    #grid-auto-columns-rows div {
      background-color: papayawhip;
      padding: 15px;
      text-align: center;
    }
  </style>
</head>

<body>

  <!-- 1. 基本的grid容器设置 -->
  <h2>1. 基本的grid容器设置</h2>
  <p>grid-template-columns: 100px 100px 100px;有3个100px就代表有3列，grid-template-rows: 50px 50px 50px;有3个50px就代表有3行，gap: 10px;代表每一格之间的间隔为10px，background-color: lightgray;代表背景颜色为lightgray。
    grid-template-rows: 50px 50px;代表第二行和第三行的高度为50px，第一行和第二行的高度为auto，也就是自动分配剩余的高度。
  </p>
  <div id="basic-grid" style="grid-template-columns: 100px 100px 100px;
      grid-template-rows: 50px 50px;">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

  <!-- 2. grid-template-columns和grid-template-rows属性 -->
  <h2>2. grid-template-columns和grid-template-rows属性</h2>

 
  <div id="basic-grid" style=" grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

  <!-- 3. grid-column-start、grid-column-end、grid-row-start和grid-row-end属性 -->
  <h2>3. grid-column-start、grid-column-end、grid-row-start和grid-row-end属性</h2>
  <div id="basic-grid" style="grid-template-columns: repeat(3, 100px);
      grid-template-rows: repeat(3, 50px);">
    <div id="cell1">A</div>
    <div id="cell2">B</div>
    <div id="cell1">A</div>
    <div id="cell2">B</div>
    <div id="cell1">A</div>
    <div id="cell2">B</div>
  </div>

  <!-- 4. grid-area属性 -->
  <h2>4. grid-area属性</h2>
  <p>
  grid-template-columns: 100px auto;columns是列，第一列是100px，第二列是auto，也就是
  剩余的宽度自动填充
  grid-template-areas: 'header header'
    'sidebar main'
    'footer footer';
    然后设置grid-area属性，因为在grid-template-columns定义了两列，所以''里面有两个名字，
    第一个里面名字是header header，表示header占据这两列，
    第二个名字是sidebar main，表示sidebar占据第一列100px，main占据第二列，
    最后又是两个footer，表示footer占据第三列。
  grid-template-rows: 50px 100px 50px;</p>
  <div id="basic-grid" 
  style="grid-template-areas: 'header header'
  'sidebar main'
  'footer footer';
grid-template-columns: 100px auto;
grid-template-rows: 50px 100px 50px;">
    <div id="header">Header</div>
    <div id="sidebar">Sidebar</div>
    <div id="main">Main</div>
    <div id="footer">Footer</div>
  </div>

  <!-- 5. justify-items和align-items属性 -->
  <h2>5. justify-items和align-items属性</h2>
  <div id="justify-align-items">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

  <!-- 6. justify-self和align-self属性  -->
  <h2>6. justify-self和align-self属性</h2>
  <div id="justify-self-align-self">
    <div id="item1">1</div>
    <div id="item2">2</div>
  </div>

  <!-- 7. grid-auto-columns和grid-auto-rows属性     -->
  <h2>7. grid-auto-columns和grid-auto-rows属性</h2>
  <div id="grid-auto-columns-rows">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

</body>

</html>